<template>
  <div class="todo-content">
    
    <!-- 缺省页 -->
    <div class="null">
      <el-table :data="tbData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
            v-if="TransferSuccess == 'success'"
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称">
          <template slot-scope="scope">
            <i style="color:#409EFF" class=" el-icon-s-order" />{{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="是否上传成功" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.status==='success'">上传成功！</template>
            <template v-else-if="scope.row.status==='error'">上传失败!</template>
            <el-progress v-else :percentage="scope.row.progress" />
          </template>
        </el-table-column>

        <el-table-column v-if="isTransfer == true" prop="name" label="是否转换成功" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.transferStatus==='success'">转换成功！</template>
            <!-- <template v-else-if="scope.row.transferStatus==='error'">转换失败!</template> -->
            <el-progress v-else :percentage="scope.row.transferProcess" />
            <!-- <p v-text="scope.row.transferProcess"></p> -->
          </template>
        </el-table-column>

        <el-table-column style="text-align:right" width="120" prop="size" label="大小" />
        <el-table-column prop="name" width="200" :show-overflow-tooltip="true" label="功能">
          <template slot-scope="scope">
            <el-button v-if="TransferSuccess == 'success'" @click="downLoad(scope.row.id)" type="primary" size="mini">下载</el-button>
            <el-button v-if="TransferSuccess == 'success'" @click="fileRename(scope.$index,scope.row.id,scope.row.name)" type="primary" size="mini">重命名</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

let config = {
               headers:{"Authorization": localStorage.getItem("token")}
           };
export default {
  name: "TodoContent",
  components: {
  
  },
  props:{
    tbData:{
        type:Array
      },
    TransferSuccess:{
      type:String
    },
    isTransfer:{
      type:Boolean
    }
  },
  data(){
        return{
            progress:0,
            list:[],
            status:"",
            selectFileList:[],
            customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}],
        }
    },
methods: {
  fileRename(row,fid,fname){
    // console.log(this.tbData[1])
    // console.log(row)
    this.$prompt('请输入新的文件名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern:/^.{0,15}$/,
          inputErrorMessage:'请输入长度在0-15的字符!',
          inputValue:fname
        }).then(({ value })=>{
          this.$axios
          .get('/file/rename?fid='+fid+'&fname='+value,config)
          .then(res=>{
            this.$message({
              type: 'success',
              message: res.data.msg
          });

          this.tbData[row].name = value
          
          }).catch(()=>{
              this.$message.error('文件重命名失败!')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: fname + '取消重命名'
          });       
        });
  },
  handleSelectionChange(arr){
    console.log(arr)
    this.selectFileList = arr;
    if(arr.length == 0){
      this.$emit('isMultiple',false)
    }else{
      this.$emit('isMultiple',true)
    }
    this.$emit('selectFileList',this.selectFileList)
  },
   async downLoad(fid){
      // console.log("当前正在下载："+fid)
        this.$axios.get('/file/download?fileId='+fid,{responseType:'arraybuffer'},config)
        .then(res=>{
            // console.log(res)
            // console.log(res.headers["content-type"])
            // console.log(res.headers["content-disposition"].split(";")[1].split("=")[1])
            const fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]
            let blob = new Blob([res.data]);
            // console.log(blob)
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
          })
    }
}
 
};
</script>

<style scoped>
/* 大盒子 */
.todo-content {
  overflow: hidden;
  min-width: 44.5rem;
  height: 46rem;
  margin: 1.5rem 0 2rem;
  border-radius: 16px;
  background-color: var(--BG);
}
.todo-content::-webkit-scrollbar {
  display: none;
}
.null {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 42rem;
}
.null > svg {
  width: 18.75rem;
  height: 18.75rem;
  margin-bottom: 50px;
}

.todo-list.completed {
  opacity: 0.6;
  margin-bottom: 50px;
}



@media (min-width: 1280px) {
  .todo-content {
    min-width: 36.5rem;
  }
}
</style>